<!DOCTYPE HTML>
<html><head>
<script language="JavaScript" type="text/javascript">
   //Gets the browser specific XmlHttpRequest Object
   function getXmlHttpRequestObject() {
   if (window.XMLHttpRequest) {
     return new XMLHttpRequest(); //Not IE
   } else if(window.ActiveXObject) {
     return new ActiveXObject("Microsoft.XMLHTTP"); //IE
   } else {
     //Display your error message here. 
     //and inform the user they might want to upgrade
     //their browser.
     alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
   }
 }			
 //Get our browser specific XmlHttpRequest object.
   var receiveReq = getXmlHttpRequestObject();		
//Initiate the asyncronous request.
function sayHello(content) {
  //If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
  if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
    // Setup the connection as a GET call to SayHello.html.
    // True explicity sets the request to asyncronous (default).

    switch (content)
      {
      case 1:
	receiveReq.open("GET", 'content1.html', true);
	break;
      case 2:
	receiveReq.open("GET", 'content2.html', true);
	break;
      case 3:
	receiveReq.open("GET", 'content3.html', true);
	break;
      case 4:
	receiveReq.open("GET", 'content4.html', true);
	break;
      case 5:
	receiveReq.open("GET", 'content5.html', true);
	break;
      case 6:
	receiveReq.open("GET", 'content6.html', true);
	break;
      }
    //Set the function that will be called when the XmlHttpRequest objects state changes.
    receiveReq.onreadystatechange = handleSayHello; 
    //Make the actual request.
    receiveReq.send(null);
  }			
}
//Called every time our XmlHttpRequest objects state changes.
function handleSayHello() {
  //Check to see if the XmlHttpRequests state is finished.
  if (receiveReq.readyState == 4) {
    //Set the contents of our span element to the result of the asyncronous call.
    document.getElementById('span_result').innerHTML = receiveReq.responseText;
  }
}
</script>

<script>
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.strokeStyle = "#00ff00";
  ctx.lineWidth = 2;
  
  <?php
  $svg = simplexml_load_file("logo.svg");
  // echo $svg->g->path[d];
  
  // foreach($svg->children() as $child)
  //          {
  //          if($child->getName() == 'g')
  //           {
  //           foreach($child->children() as $child1)
  //           echo $child1->getName() . "\n";
  //           }
  // 	 }
  /*
    foreach ($svg as $path) {
    
    foreach ($path->attributes() as $key => $val) {
    if ($key == "fill")
    echo "\n" . 'ctx.fillStyle = "' . $val . '";' . "\n";
    elseif($key == "d")*/ 
  
  $val = $svg->g->path['d'];
  {      
    $bang = array_filter(preg_split ("/(m|c|l|z)/", $val, -1, PREG_SPLIT_DELIM_CAPTURE), "shall_i_remove");
    $j = 1;
    echo $bang;
    foreach ($bang as $b) {
      if ($b == "m")
	$bang[$j+1] = "ctx.moveTo(" . str_replace(" ", ", ", trim($bang[$j+1])) . ");";
      elseif ($b == "c")
	$bang[$j+1] = "ctx.bezierCurveTo(" . str_replace(" ", ", ", trim($bang[$j+1])) . ");";
      elseif ($b == "l")
	$bang[$j+1] =  "ctx.lineTo(" . str_replace(" ", ", ", trim($bang[$j+1])) . ");";
      $j++;
    }
    $results = array_filter($bang, "shall_i_clean");
    echo "ctx.beginPath();\n";
    foreach ($results as $r) {
      echo $r . "\n";
    }
    echo "ctx.stroke();\nctx.fill();\n";
  }
  
  function shall_i_remove($arr) {
    return ($arr == "" || $arr == " " || $arr == "Z") ? false : true;
  }
  
  function shall_i_clean($arr) {
    return ($arr == "C" || $arr == "L" || $arr == "M") ? false : true;
  }
  ?>
  </script>
      
      
      </head>
      <body onload="draw()">
      <table border="0">
      <tr>
      <td>
      <a href="javascript:sayHello(1);">About Us</a><br />
      <a href="javascript:sayHello(2);">Web Design</a><br />
      <a href="javascript:sayHello(3);">Applications</a><br />
      <a href="javascript:sayHello(4);">Consultancy</a><br />
      <a href="javascript:sayHello(5);">Social Media</a><br />
      <a href="javascript:sayHello(6);">Contact Us</a><br />

      <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.

      </canvas>
      </td>
      <td>
      <span id="span_result"></span>
      <?php 
      Echo '<p>content</p>'; 
  ?>
  </td> 
      </tr>
      </table>

      <!-- <script language="JavaScript" type="text/javascript"> -->
      <!--   var c=document.getElementById("myCanvas"); -->
      <!--   var cxt=c.getContext("2d"); -->
	 <!--   cxt.fillStyle="#FF0000"; -->
	    <!--   cxt.fillRect(0,0,150,75); -->
	       <!-- </script> -->

			</body>
			</html>

